<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>采购入库</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-form-item" style="height: 60px;line-height: 60px;margin-left: 72%;">
    <button class="pear-btn pear-btn-primary pear-btn-md" onclick="addDrugInfo()">
        <i class="layui-icon layui-icon-add-1"></i>
        添加药品
    </button>
    <button class="pear-btn pear-btn-warming pear-btn-md" onclick="batchSettings()">
        <i class="layui-icon layui-icon-edit"></i>
        批量设置
    </button>
    <button class="pear-btn pear-btn-primary pear-btn-md" onclick="storageMake()">
        <i class="layui-icon layui-icon-ok"></i>
        暂存
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" onclick="submitExamine()">
        <i class="layui-icon layui-icon-util"></i>
        提交审核
    </button>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="" id="dataForm">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">单据号:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" id="orderId" class="layui-input" readonly="readonly">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">制单人:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="operation" id="operation" th:value="${session.user.userName}"
                               readonly="readonly" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">供应商:</label>
                    <div class="layui-input-inline">
                        <select id="supplierId" name="supplierId">
                            <option value="">请选择供应商</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">总批发额:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="price" id="price" class="layui-input" readonly="readonly">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<!--数据表格-->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="make-table" lay-filter="make-table"></table>
    </div>
</div>

<!-- 添加药品信息弹层 -->
<div style="display: none;padding: 3px" id="saveDrugInfoDiv">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">药品编码:</label>
                <div class="layui-input-inline">
                    <input type="text" name="code" placeholder="请输入药品编码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">药品类型:</label>
                <div class="layui-input-inline">
                    <select id="drugType" name="drugType">
                        <option value="">请选择药品类型</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">处方类型:</label>
                <div class="layui-input-inline">
                    <select id="preType" name="preType">
                        <option value="">请选择处方类型</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="drugInfo-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
            </div>
        </div>
    </form>
    <!-- 分配角色  数据表格 -->
    <table id="drugInfoTable" lay-filter="drugInfoTable"></table>
</div>

<!--批量设置弹出层-->
<div style="display: none;padding: 3px" id="batchSettingsDiv">
    <form class="layui-form" id="dataFrm" lay-filter="dataFrm" action="">
        <div class="mainBox">
            <div class="main-container">
                <div class="main-container">
                    <div class="layui-form-item">
                        <label class="layui-form-label">数量:</label>
                        <div class="layui-input-block">
                            <input type="hidden" id="purId" name="purId">
                            <input type="text" name="number" lay-verify="required|number" autocomplete="off"
                                   placeholder="请输入数量"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">批发价格:</label>
                        <div class="layui-input-block">
                            <input type="text" name="tradePrice" lay-verify="required|number" autocomplete="off"
                                   placeholder="请输入批发价格"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">批次号:</label>
                        <div class="layui-input-block">
                            <input type="text" name="batchNumber" lay-verify="required" autocomplete="off"
                                   placeholder="请输入批批次号"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!--行工具栏-->
<script type="text/html" id="make-bar">
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;

        let billNumber;

        //获取一个订单号
        $.get("/make/getBillNumber", function (data) {
            billNumber = data.data;
            $("#orderId").val(billNumber);
        });

        //加载供应商的查询下拉框
        $.get("/purchase/loadAllSupplier", function (data) {
            let supplierId = $("#supplierId");
            let html = '<option value="">请选择供应商</option>'
            $.each(data.data, function (i, item) {
                html += '<option value="' + item.id + '">' + item.name + '</option>'
            });
            supplierId.html(html);
            form.render();
        });

        let cols = [
            [{
                title: '药品ID',
                field: 'drugId',
                width: '100',
                align: 'center',
            },
                {
                    title: '药品名称',
                    width: '120',
                    field: 'drugName',
                    align: 'center'
                },
                {
                    title: '规格',
                    width: '80',
                    field: 'specifications',
                    align: 'center',
                },
                {
                    title: '生产厂家',
                    width: '210',
                    field: 'productionName',
                    align: 'center',
                },
                {
                    title: '数量',
                    width: '100',
                    edit: 'text',
                    field: 'number',
                    align: 'center',
                },
                {
                    title: '单位',
                    width: '80',
                    field: 'company',
                    align: 'center',
                },
                {
                    title: '批发价',
                    width: '100',
                    edit: 'text',
                    field: 'tradePrice',
                    align: 'center',
                },
                {
                    title: '批发额',
                    width: '100',
                    field: 'wholesaleAmount',
                    align: 'center',
                },
                {
                    title: '批次号',
                    width: '100',
                    edit: 'text',
                    field: 'batchNumber',
                    align: 'center',
                },
                {
                    title: '操作',
                    width: '120',
                    toolbar: '#make-bar',
                    align: 'center',
                }
            ]
        ]
        var tableIns = table.render({
            elem: '#make-table',
            url: '/make/loadAllOrderPage',
            page: true,
            cols: cols,
            response: {
                statusCode: 200
            },
            done: function (res, curr, count) {
                if (res.data.length == 0 && curr != 1) {
                    tableIns.reload({
                        page: {
                            curr: (curr - 1)
                        }
                    });
                }
            },
        });

        //行监听
        table.on('tool(make-table)', function (obj) {
            if (obj.event === 'remove') {
                remove(obj);
            }
        });

        //监听单元格编辑
        table.on('edit(make-table)', function (obj) {
            let data;
            if (obj.field == "number") {
                data = {
                    "drugId": obj.data.drugId,
                    "company": obj.data.company,
                    "tradePrice": obj.data.tradePrice,
                    "number": obj.value,
                    "purId": billNumber
                };
            }
            if (obj.field == "tradePrice") {
                data = {
                    "drugId": obj.data.drugId,
                    "number": obj.data.number,
                    "company": obj.data.company,
                    "tradePrice": obj.value,
                    "purId": billNumber
                };
            }
            if (obj.field == "batchNumber") {
                data = {
                    "drugId": obj.data.drugId,
                    "batchNumber": obj.value,
                    "purId": billNumber
                };
            }

            $.ajax({
                url: "/make/updateMakeDrugInfo",
                dataType: 'json',
                data: data,
                type: 'POST',
                success: function (result) {
                    table.reload('make-table');
                    if (result.code == 200) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })

        });

        let mainIndex;
        window.addDrugInfo = function () {
            mainIndex = layer.open({
                type: 1,
                title: ['添加药品信息', 'font-size:18px;text-align: center;'],
                area: ['1080px', '600px'],
                content: $("#saveDrugInfoDiv"),
                btn: ['确认', '取消'],
                btnAlign: 'c',
                success: function (index) {

                    //加载药品类型的下拉框
                    $.get("/drugInfo/loadDrugType", function (data) {
                        let drugType = $("#drugType");
                        let html = '<option value="">药品类型</option>'
                        $.each(data.data, function (i, item) {
                            html += '<option value="' + item.id + '">' + item.name + '</option>'
                        });
                        drugType.html(html);
                        form.render();
                    });

                    //加载处方类型的下拉框
                    $.get("/drugInfo/loadPreType", function (data) {
                        let preType = $("#preType");
                        let html = '<option value="">药品类型</option>'
                        $.each(data.data, function (i, item) {
                            html += '<option value="' + item.id + '">' + item.name + '</option>'
                        });
                        preType.html(html);
                        form.render();
                    });

                    //弹层数据表格的渲染
                    table.render({
                        elem: '#drugInfoTable',
                        url: '/make/loadMakeDrugInfo',
                        cols: [
                            [
                                {type: 'checkbox'},
                                {field: 'id', title: '药品ID', width: '90', align: 'center'},
                                {field: 'name', title: '药品名称', width: '100', align: 'center'},
                                {field: 'code', title: '药品编码', width: '100', align: 'center'},
                                {field: 'productionName', title: '生产厂家', width: '200', align: 'center'},
                                {field: 'drugTypeName', title: '药品类型', width: '100', align: 'center'},
                                {field: 'preTypeName', title: '处方类型', width: '100', align: 'center'},
                            ]
                        ],
                        page: true,
                        response: {
                            statusCode: 200
                        }
                    });

                    //表格监听
                    form.on('submit(drugInfo-query)', function (data) {
                        table.reload('drugInfoTable', {
                            where: data.field
                        })
                        return false;
                    });

                },
                yes: function (index, layero) {
                    let checkStatus = table.checkStatus('drugInfoTable');
                    let ids = "purId=" + billNumber;
                    $.each(checkStatus.data, function (i, item) {
                        ids += "&ids=" + item.id;
                    });
                    $.ajax({
                        url: "/make/addMakeDrugInfoOne",
                        dataType: 'json',
                        data: ids,
                        type: 'POST',
                        success: function (result) {
                            layer.close(mainIndex);
                            if (result.code == 200) {
                                layer.msg(result.msg, {
                                    icon: 1,
                                    time: 1000
                                });
                                table.reload('make-table');
                            } else {
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        }
                    })
                }
            });
        }

        window.batchSettings = function () {
            mainIndex = layer.open({
                type: 1,
                title: ['批量设置', 'font-size:18px;text-align: center;'],
                area: ['400px', '340px'],
                content: $("#batchSettingsDiv"),
                btn: ['确认', '取消'],
                btnAlign: 'c',
                success: function () {
                    $("#dataFrm")[0].reset();
                },
                yes: function (index, layero) {
                    $("#purId").val(billNumber);
                    let params = $("#dataFrm").serialize();
                    $.ajax({
                        url: "/make/addMakeDrugInfoTwo",
                        dataType: 'json',
                        data: params,
                        type: 'POST',
                        success: function (result) {
                            layer.close(mainIndex);
                            table.reload('make-table');
                            if (result.code == 200) {
                                layer.msg(result.msg, {
                                    icon: 1,
                                    time: 1000
                                });
                            } else {
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        }
                    })
                }
            });
        }

        window.storageMake = function () {
            $.ajax({
                url: "/make/loadSumWholesaleAmount",
                dataType: "json",
                data: {"purId": billNumber},
                type: 'GET',
                success: function (data) {
                    $("#price").val(data.data);
                    let params = $("#dataForm").serialize();
                    $.ajax({
                        url: "/purchase/addPurchase/",
                        dataType: 'json',
                        data: params,
                        type: 'POST',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg(result.msg, {
                                    icon: 1,
                                    time: 1000
                                });
                            } else {
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        }
                    })
                }
            })
        }

        window.submitExamine = function () {
            $.ajax({
                url: "/purchase/submitExamine/" + billNumber,
                dataType: 'json',
                type: 'POST',
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
        }


        //删除
        function remove(obj) {
            layer.confirm('确定要删除?', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: "/make/deleteMakeDrugInfo/" + obj.data['drugId'] + "/" + billNumber,
                    dataType: 'json',
                    type: 'DELETE',
                    success: function (result) {
                        layer.close(loading);
                        table.reload('make-table');
                        if (result.code == 200) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }
    })
</script>
</body>
</html>
